<template>
  <view>
    <view v-if="fansList && fansList.length > 0">
      <view class="one-item" v-for="(item, index) in fansList" :key="index">

        <view class="his_info" @click="enterUserHome(item.userId)">
          <view class="his_avatar">
            <image :src="item.avatar" mode="aspectFill"></image>
          </view>
          <view class="his_name">{{item.userName}}</view>
        </view>
       <button class="send-message" @click.stop="sendMessage(item.userId, item.userName)">发消息</button>
      </view>
    </view>
    <view v-else class="empty-fans">
      粉丝列表为空~
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userId: "",
        fansList: [],
      }
    },

    methods: {
        //发消息
	  sendMessage(theUserId, theUserName){
		  uni.navigateTo({
		    url: `/subpkg/private_chat/private_chat?theUserId=${theUserId}&theUserName=${theUserName}`,
		  });
	  },
       //进入用户主页
    enterUserHome(theUserId) {
      uni.navigateTo({
        url: `/subpkg/user_home/user_home?theUserId=${theUserId}`,
      });
    },
      getFansList() {
        uni.$http
          .get(`/follow/getFansList?userId=${this.userId}`)
          .then((res) => {
            console.log("查看粉丝列表", res.data);
            // 解析服务器返回的 JSON 数据
            const responseData = res.data;
            if (responseData.code === 200) {
              this.fansList = responseData.data;
            } else {
              console.log("获取粉丝列表失败:", responseData);
            }
          })
          .catch((err) => {
            console.error('获取粉丝列表失败:', err);
          });
      }
    },

    onLoad() {
      this.userId = uni.getStorageSync('userId');
      console.log("userId:", this.userId);
      this.getFansList();
    },
  }
</script>

<style lang="scss">

.empty-fans {
  text-align: center;
  margin-top: 150px;
  color: rgb(130, 130, 130);
}

.his_info {
  background-color: #ffffff;
  display: flex;
  height: 70px;
  margin-bottom: 1px;
  width: 100%;

  .his_avatar {
    width: 50px;
    height: 50px;
    margin: 10px 10px;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .his_name {
    margin-top: 15px;
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 省略号显示 */
    width: 170px;
  }
}
.one-item {
	display: flex;
}
.send-message {
	margin-top: 18px;
	height: 34px;
	font-size: 14px;
	background-color: #fbd269;
	color: white;
	border: none;
	border-radius: 20px;
	text-align: center;
	position: absolute;
	right: 25px;
}

</style>



